<template>
  <div>
    <h1>
      App:当前是第{{ pageInfo.current }}页,当前每页是{{ pageInfo.limit }}条
    </h1>

    <!-- 
      vue中批量传递props:直接把props的对象中的属性展开依次传递进入
      使用v-bind="obj",就可以把obj的属性展开依次传递
     -->
    <Pagination
      v-bind="pageInfo"
      :changeCurrent="changeCurrent"
      :changeLimit="changeLimit"
    />
  </div>
</template>

<script>
import Pagination from "./components/Pagination";
export default {
  name: "App",
  components: {
    Pagination,
  },
  data() {
    return {
      pageInfo: {
        current: 1,
        limit: 5,
        total: 6,
      },
    };
  },
  methods: {
    changeCurrent(current) {
      this.pageInfo.current = current;
    },
    changeLimit(limit) {
      this.pageInfo.limit = limit;
    },
  },
};
</script>

<style></style>
